<template>
    <div class="module">
        <!--<div class="toolbar clean">-->
            <!--<div class="title inline_block left">访客操作记录列表</div>-->
            <!--<div class="tool inline_block right">-->
                <!--<el-date-picker-->
                <!--v-model="dateRegion"-->
                <!--value-format="yyyy-MM-dd"-->
                <!--type="daterange"-->
                <!--range-separator="至"-->
                <!--start-placeholder="开始日期"-->
                <!--end-placeholder="结束日期">-->
                <!--</el-date-picker>-->
                <!--<el-button @click="loadAccountList" type="primary">搜索</el-button>-->
            <!--</div>-->
        <!--</div>-->
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">
                        访客操作记录列表
                        &#X3000;&#X3000;
                        <el-date-picker
                                size="small"
                                v-model="dateRegion"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button type="primary" size="small" @click="loadAccountList">筛选</el-button>
                    </div>
                    <!--<div class="leave_right choose_right_input">-->
                        <!--<el-input type="text" placeholder="请输入关键字" v-model="form.keyWord" clearable @clear="chooseLose()"></el-input><el-button type="primary" size="small" @click="chooseLose()">搜索</el-button>-->
                    <!--</div>-->
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="operateName" label="访客名称"> </el-table-column>
            <el-table-column prop="operateDescription" label="操作明细"> </el-table-column>
            <el-table-column prop="createTime" :formatter="formatter" label="访问时间"> </el-table-column>
        </el-table>
        <div class="right clear pagingbar">
            <el-pagination
            @size-change="onSizeChange"
            @current-change="onFlipOver"
            :current-page="pagination.currentPage"
            :page-sizes="pagination.pageSizes"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
    import { formatter, DateTools } from '@/util/format';
    import Pagination from "@/types/Pagination";

    @Component({
        extends: Pagination
    })
    export default class VisitLog extends Vue {
        @Prop(String) enterpriseId!:number

        // data
        tableData = [];
        dateRegion = [DateTools().earlyMonth(), DateTools().endMonth()]

        // methods
        formatter = formatter
        /**
         * 查询所有汇票豆账户列表
         */
        async loadAccountList() {
            let res = await this.$http.post('draftbean/accounts/records', {
                enterpriseId: this.enterpriseId,
                startTime: this.dateRegion[0],
                endTime: this.dateRegion[1],
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize
            })
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }

        loadDataForPagination() {
            this.loadAccountList()
        }

        // life circle
        created() {
            // this.addBreadCrumb(this.$route.meta.breadCrumb);
        }

        mounted() {
            this.loadAccountList();
        }
    }
</script>

<style lang="scss">

</style>